{% extends "base.html" %}

{% block content %}
<div class="bg-white rounded-lg shadow-card p-6 mb-6">
  <h2 class="text-xl font-bold mb-4 flex items-center">
    <i class="fa fa-history text-gray-500 mr-2"></i> 库存操作历史
  </h2>
  
  <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">操作类型</label>
      <select id="operation-type" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary">
        <option value="all">全部</option>
        <option value="in">入库</option>
        <option value="out">出库</option>
      </select>
    </div>
    
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">设备名称</label>
      <select id="device-filter" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary">
        <option value="all">全部设备</option>
        {% for device in devices %}
          <option value="{{ device.name }}">{{ device.name }}</option>
        {% endfor %}
      </select>
    </div>
    
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">开始日期</label>
      <input type="date" id="start-date" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary">
    </div>
    
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">结束日期</label>
      <input type="date" id="end-date" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary">
    </div>
  </div>
  
  <div class="flex items-center justify-between mb-4">
    <div class="relative w-full md:w-64">
      <input type="text" id="search-history" placeholder="搜索记录..." 
        class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary">
      <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
    </div>
    
    <div class="flex space-x-3">
      <button id="apply-filter" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-custom">
        <i class="fa fa-filter mr-2"></i> 应用筛选
      </button>
      <button id="export-excel" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-custom">
        <i class="fa fa-download mr-2"></i> 导出Excel
      </button>
    </div>
  </div>
  
  <div class="overflow-x-auto">
    <table class="min-w-full divide-y divide-gray-200">
      <thead class="bg-gray-50">
        <tr>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间</th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">设备名称</th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作类型</th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数量</th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作后库存</th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">原因/备注</th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">照片</th>
        </tr>
      </thead>
      <tbody class="bg-white divide-y divide-gray-200" id="history-table-body">
        {% for record in history %}
          <tr class="hover:bg-gray-50 transition-custom">
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ record.timestamp }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ record.device_name }}</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-2 py-1 text-xs font-medium rounded-full 
                {% if record.action == '入库' %}bg-green-100 text-green-800{% else %}bg-red-100 text-red-800{% endif %}">
                {{ record.action }}
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ record.amount }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ record.current_stock }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ record.reason or '-' }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
              {% if record.photo_path %}
                <a href="{{ url_for('report.view_photo', filename=record.photo_path) }}" target="_blank" class="text-primary hover:text-primary/80">
                  <i class="fa fa-image mr-1"></i> 查看
                </a>
              {% else %}
                无照片
              {% endif %}
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  
  <div class="flex items-center justify-between px-4 py-3 sm:px-6 mt-4">
    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
      <div>
        <p class="text-sm text-gray-700">
          显示第 <span class="font-medium">1</span> 至 <span class="font-medium">{{ history|length }}</span> 条，共 <span class="font-medium">{{ total_records }}</span> 条记录
        </p>
      </div>
      <div>
        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
          <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
            <span class="sr-only">上一页</span>
            <i class="fa fa-chevron-left h-5 w-5"></i>
          </a>
          <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-primary text-sm font-medium text-white hover:bg-primary/90">
            1
          </a>
          <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
            2
          </a>
          <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
            ...
          </span>
          <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
            20
          </a>
          <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
            <span class="sr-only">下一页</span>
            <i class="fa fa-chevron-right h-5 w-5"></i>
          </a>
        </nav>
      </div>
    </div>
  </div>
</div>
{% endblock %}